<template>
	<view class="">
		<view class="pad-lr-30 pad-tb-20 bgfff">
			<view class="bgf6 pad-tb-4 radius-36 display-sb align-items mar-top-20 inp_view">
				<image src="/static/img/icon_sousuo.png" class="proudct-item-icon-24 ml20" mode=""></image>
				<input type="text" class="ipt fontSize-26 col-6 ml20" placeholder="搜索商品名称"  v-model="keyword" @confirm="_indexsearch" />
				<image src="/static/img/icon_quxiao.png" class="wid-hig-16 marrig10" mode="" v-if="!isbtn" @click.stop="cleaript"></image>
				<view class="fontSize-28 col-f radius-36 text-align-center line-60 seach_btn" @click="_indexsearch">搜索</view>
			</view>
		</view>
			<view class="row a-center pad-tb-20 pad-lr-20 bgfff">
				<view class="flex1 row j-sb">
					<view class="w-per25" :class="tab_index1===index?'col-C9951C':''" v-for="(item,index) in tabs1" :key="index" @tap="changeTab1(index)">
						{{item.text}}
					</view>
					<view class="w-per25 row a-center" @tap="changeSort">
						<text class="mr10">价格</text>
						<view class="column a-center">
							<view class="">
								<tm-icon name="tmicon-arrow-sortdown-smal" class="trfrom" fontSize="26" :color="price_sort===0?'#bc8c1e':'#D9D9D9'"></tm-icon>
							</view>
							<view class="">
								<tm-icon name="tmicon-arrow-sortdown-smal" fontSize="26" :color="price_sort===1?'#bc8c1e':'#D9D9D9'"></tm-icon>
							</view>
						</view>
					</view>
				</view>
			</view>
		<view class="pad-lr-20 bgfff">
			<view class="mar-top-20 pad-lr-20 pad-tb-20 radius-16 bgfff display" v-for="item in goodlist" :key="item.id" @click="gogoodsdetails(item.id)">
				<image :src="item.image_text" class="proudct-item-icon-10 radius-16" mode=""></image>
				<view class="ml20 righr_view">
					<view class=" display align-items fontSize-28 ">
						<text class="col-f tag_view_two radius-4 fontSize-22" v-if="item.is_limit==1">限购</text>
						<rich-text :nodes="keyWordchangeColor(keyword,item.name)" class="text-clamp-1"></rich-text>
					</view>
					<view class="display-sb align-items mar-top-20 fontSize-26">
						<text>销量{{item.total_sales>999?'999+':item.total_sales}}</text>
					</view>
					<view class="mar-top-22 fontSize-28 col-E23737"><text class="fontSize-20">￥</text>{{item.price}}</view>
				</view>
			</view>
			<view class="display-ce align-items" v-if="goodlist?.length==0">
				<tm-result :showBtn="false" subTitle=" " title="暂无数据" color="#bc8c1e"></tm-result>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import {goodsList} from '@/utils/api'
import { onLoad } from '@dcloudio/uni-app';
onLoad(()=>{
	
})
const tabs1 =ref([{value:1,text:'综合'},{value:2,text:'销量'},{value:3,text:'新品'},])
const tab_index1 = ref(0)
const price_sort = ref(1)//价格排序 0升1降
const keyword = ref('')
//搜索
const isbtn = ref(true)
const goodlist = ref([])//商品列表
const _indexsearch = () =>{
	page.value=1
	goodlist.value = []
	_goodsList();
}
const page = ref(1)
const _goodsList = () =>{
	goodsList({	page:page.value,
				limit:10,
				sort:sort.value,
				keyword:keyword.value
	}).then(res=>{
		if(res.code==1){
			goodlist.value =goodlist.value.concat(res.data.goods.data)
			if(res.data.goods.data.length>0){
				page.value++
			}
		}
	})
}
const keyWordchangeColor = (kw:string|number, str:string|number)=>{
	// kw 传入的关键字 str 需要检索关键字的字符串
	const reg = new RegExp(kw, 'ig'); // ig 是所有的意思 而非在发现第一个匹配项时立即停止
	// 使用replace方法替换元素产生高亮
	return str.replace(reg, (match) => `<span style="color:#D92129">${match}</span>`);
}
// 宫格 筛选
 const sort = ref(1)
const changeTab1=(index)=>{
	tab_index1.value = index;
	sort.value = tabs1.value[tab_index1.value].value;
	price_sort.value = 1;
	page.value = 1;
	goodlist.value = []
	_goodsList();
}
// 价格
const changeSort=()=>{
	price_sort.value = price_sort.value===0?1:0;
	sort.value = price_sort.value===0?4:5;
	page.value = 1;
	goodlist.value = []
	_goodsList();
}
const cleaript =() =>{
	keyword.value = ''
	isbtn.value = true
}
const gogoodsdetails =(id:number) =>{
	uni.navigateTo({
		url:'/indexpages/goodsDetail/goodsDetail?id='+id
	})
}
const goshopgoods = (id) =>{
	uni.navigateTo({
		url:'/indexpages/shopgoods/shopgoods?id='+id
	})
}
</script>

<style lang="scss">
@import 'search.scss';
</style>
